<template>
  <div>
    <div>
      名称： <Input v-model="searchData.articleTitle" placeholder="Enter something..." style="width: 300px" />
      <Button type="primary" icon="ios-search" @click="search">Search</Button>
      <Button :size="buttonSize" type="primary" @click="add">新增菜单</Button>

    </div>
    <Table border :columns="columns7" :data="data6" />
    <Page :total="total" show-total show-elevator :page-size="searchData.pageSize" :current="searchData.pageCurrent" prev-text="上一页" next-text="下一页" @on-change="add()" />

    <el-dialog :title="textMap[dialogStatus] == 'update' ? '修改' : '新增'" :visible.sync="dialogFormVisible">
      <ArticleCreate />
    </el-dialog>
  </div>
</template>
<script>
import { getPageArticleList, delArticle, updateStatus } from '@/api/article_request'
import { getDate, setSuggest } from '@/utils/dateUtile'
import { setUpdateIds } from '@/utils/host'
import ArticleCreate from './ArticleCreate'

export default {
  components: { ArticleCreate }, // 引用组件
  data() {
    return {
      updateId: '1',
      datetime: 'yyyy:MM:dd:',
      temp: {
        id: undefined,
        categoryId: '',
        articleTitle: '',
        text: '',
        pictureUrl: '',
        praiseSumber: '',
        replyNumber: '',
        status: '',
        recommendStatus: ''
      },
      total: 1,
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        name: [{ required: true, message: '必填', trigger: 'change' }],
        url: [{ required: true, message: '必填', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      textMap: {
        url: '',
        update: 'Edit',
        create: 'Create'
      },
      searchData: {
        articleTitle: '',
        pageSize: 10,
        pageCurrent: 1
      },
      pageSizeOpts: [10, 20],
      buttonSize: 'large',
      columns7: [
        {
          title: '文章名称',
          key: 'articleTitle',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.articleTitle)
            ])
          }
        },
        {
          title: '照片路径',
          key: 'pictureUrl'
        },
        {
          title: '点赞数',
          key: 'praiseSumber'
        },
        {
          title: '回复数',
          key: 'replyNumber'
        },
        {
          title: '创建时间',
          key: 'startTime',
          render: (h, params) => {
            return h('div', {}, getDate(params.row.startTime))
          }
        },
        {
          title: '文章状态',
          key: 'status',
          render: (h, params) => {
            if (params.row.status === '1') {
              return h('div', {}, '发布')
            } else if (params.row.status === '2') {
              return h('div', {}, '未发布')
            }
            return ''
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.delete(params.row.id)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.update(params.row.id)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateStatus(params.row.id, params.row.status)
                  }
                }
              }, '发布更改')
              // h('Button', {
              //   props: {
              //     type: 'warning',
              //     size: 'small'
              //   },
              //   style: {
              //     marginRight: '5px'
              //   },
              //   on: {
              //     click: () => {
              //       this.update(params.row.id)
              //     }
              //   }
              // }, '评论')
            ])
          }
        }
      ],
      data6: [

      ]
    }
  },
  created() {
    this.data6 = []
    this.createPage()
  },
  methods: {
    createPage: function() {
      this.data6 = []
      getPageArticleList(this.searchData).then(response => {
        var dataObj = response.data
        this.total = dataObj.pageShowTotal
        this.searchData.pageSize = dataObj.pageSize
        this.searchData.pageCurrent = dataObj.pageCurrent + 1
        for (let i = 0; dataObj.pageList.length > i; i++) {
          this.data6.push(dataObj.pageList[i])
        }
      })
    },
    updateStatus(id, status) {
      console.log(status)
      if (status === '1') {
        status = '2'
      } else if (status === '2') {
        status = '1'
      }
      updateStatus(id, status).then(response => {
        setSuggest(this.$Modal, '提示信息', '成功')
        this.createPage()
      }).catch(error => {
        console.log(error)
        setSuggest(this.$Modal, '提示信息', '失败')
      })
    },
    delete(index) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确定删除',
        onOk: () => {
          delArticle(index).then(response => {
            setSuggest(this.$Modal, '提示信息', '删除成功')
            this.createPage()
            // eslint-disable-next-line handle-callback-err
          }).catch(error => {
            setSuggest(this.$Modal, '提示信息', '删除失败')
          })
        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    select() {
      this.createPage()
    },
    update(index) {
      this.temp = {}
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      setUpdateIds('Update_article', [{ 'id': index }, { 'status': 'update' }])
    },
    search() {
      this.select()
    },
    commit() {
    },
    add() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    }
  }
}
</script>
